<template>
	<view class="content unify-background-color unify-padding">
		<!-- 标题 -->
		<!-- <view class="title unify-weight unify-flex">
			<view class="iconfont el-icon-shop"></view>
			{{appName}}
		</view> -->
		
		<view class="item unify-flex" v-for="(item,index) in carList" :key="index">
			<image class="item-cover unify-radius" :src="item.image || errorImage" mode=""></image>
			<view class="item-right unify-relative">
				<view class="item-name unify-weight unify-font-size-line-astrict">{{item.name}}</view>
				<!-- 口味未做 -->
				<!-- <view class="item-spec">{{item.spec}}</view> -->
				<view class="item-abs unify-flex unify-absolute">
					<view class="item-price unify-weight" :class="'tf-' + themeColor.name">{{moneySymbol + item.amount}}</view>
					<view class="item-num">{{'X' + item.number}}</view>
				</view>
			</view>
		</view>
		
		<!-- 其他 -->
		<view class="affirm-order-rests" v-if="isOpenTakeOut && isTakeOut === 0">
			<view class="affirm-order-rests-item unify-flex" v-for="(item,index) in (affirmOrderMenu && affirmOrderMenu.from1)" :key="index">
				<view class="affirm-order-rests-item-name unify-weight">{{item.name}}</view>
				<view class="affirm-order-rests-item-right unify-flex">
					<view :class="{'value-dif': index > 1}" style=" text-decoration:line-through">{{(index < 2? moneySymbol: '' ) + item.value}}</view>
					<view class="iconfont el-icon-icon12 unify-rotate90" v-if="index > 1"></view>
				</view>
			</view>
		</view>
		
		<!-- 小计 -->
		<view class="order-subtotal unify-relative">
			<view class="unify-border-top"></view>
			<view class="order-subtotal-right unify-weight unify-absolute">
				<text class="order-subtotal-right-desc">小计</text>
				<text class="order-subtotal-right-desc order-subtotal-right-symbol">{{moneySymbol}}</text>
				{{totalPrice}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			affirmOrderMenu: {
				type: Object,
				default: undefined
			},
			isOpenTakeOut: {
				type: Boolean,
				default: false
			},
			isTakeOut: { // 判断是否是外卖  0是  1否
				type: Number,
				default: 0
			},
				
			carList:{
				type:Array,
				default: null
			},
			totalPrice:{
				type:Number,
				default: 0
			}
		},
		data() {
			return {
				errorImage: this.$mAssetsPath.errorImage,
				moneySymbol: this.$mConstDataConfig.moneySymbol,
				appName: this.$mSettingConfig.appName,
				// list: [{
				// 	name: '新鲜盐焗鸡',
				// 	image: '',
				// 	num: 1,
				// 	spec: '已选：微辣',
				// 	price: '10.00'
				// }]
			}
		}
	}
</script>

<style lang="scss" scoped>
	$image: 166rpx;
	
	// 标题
	.title {
		line-height: 120rpx;
		font-size: $uni-font-size-tt;
		align-items: center;
		
		.el-icon-shop {
			font-size: 35rpx;
			margin-right: 10rpx;
		}
	}
	
	// 列表
	.item {
		height: $image;
		padding: 0 0 40rpx;
		align-items: center;
		justify-content: space-between;
	}
	
	.item-cover {
		width: $image;
		height: $image;
	}
	
	.item-right {
		width: 71%;
		height: inherit;
	}
	
	.item-name {
		font-size: $uni-font-size-base;
	}
	
	.item-spec {
		font-size: $uni-font-size-sm;
		color: $uni-text-color-grey;
		margin-top: 10rpx;
	}
	
	.item-abs {
		width: 100%;
		justify-content: space-between;
		bottom: 0;
	}
	
	.item-price {
		font-size: $uni-font-size-lg;
	}
	
	.item-num {
		font-size: $uni-font-size-sm;
		color: $uni-text-color-grey;
		margin-top: 4rpx;
	}
	
	// 其他
	.affirm-order-rests {
		font-size: $uni-font-size-base;
		padding-bottom: 20rpx;
	}
	
	.affirm-order-rests-item {
		height: 66rpx;
		align-items: center;
		justify-content: space-between;
	}
	
	.affirm-order-rests-item-name {
		
	}
	
	.affirm-order-rests-item-right {
		max-width: 60%;
	}
	
	.value-dif {
		color: $uni-text-color-grey;
	}
	
	.el-icon-icon12 {
		font-size: $uni-font-size-base;
	}
	
	// 小计
	.order-subtotal {
		height: 96rpx;
		line-height: 96rpx;
	}
	
	.order-subtotal-right {
		right: 0;
		font-size: $uni-font-size-tt;
	}
	
	.order-subtotal-right-desc {
		font-size: $uni-font-size-sm;
		font-weight: 500;
	}
	
	.order-subtotal-right-symbol {
		margin-left: 10rpx;
	}
</style>
